let apiTypeData = [
    { name: "全部", keyword: "身份证实名", isnew: false },
    { name: "生活服务", keyword: "银行卡", isnew: false },
    { name: "金融科技", keyword: "短信", isnew: false },
    { name: "交通地理", keyword: "天气", isnew: false },
    { name: "充值缴费", keyword: "短信", isnew: false },
    { name: "数据智能", keyword: "手机归属地", isnew: false },
    { name: "企业工商", keyword: "IP", isnew: false },
    { name: "应用开发", keyword: "手机归属地", isnew: false },
    { name: "电子商务", keyword: "IP", isnew: false },
    { name: "吃喝玩乐", keyword: "视频", isnew: false },
    { name: "文娱视频", keyword: "视频", isnew: false },
    { name: "免费接口大全", keyword: "短信", isnew: true },
    { name: "短信", keyword: "身份证实名", isnew: false },
    { name: "汽车", keyword: "银行卡", isnew: false },
    { name: "核验", keyword: "银行卡", isnew: false },
    { name: "最新发布", keyword: "银行卡", isnew: true },
    { name: "API私有化部署", keyword: "身份证实名", isnew: true },
]

//定义html代码片段
let diamaPianduanHtml = '';
//将apiYypeData数组遍历出来
apiTypeData.forEach(function(v, i) {
        //v代表数组中的每个对象
        //v.name表示将对象中的name值放在里面
        //三元运算符   i表示每个对象的索引，当i等于0的时候就把active赋给类名   否则类名为空
        diamaPianduanHtml += ` <a  data-keyword="${v.keyword}" class="${i===0 ? 'active' : ''} ${v.isnew===true ? 'jiacu': ''}" href="#">${v.name}</a>`



    })
    //将代码片段渲染到页面
$('.ification1').innerHTML = diamaPianduanHtml
    //点击分类切换属性  事件委派注册给父元素
$('.ification1').addEventListener('click', function(e) {
    //e.target.nodeName   表示当前元素 返回的是大写字母  意思是点击分类返回A    判断当前元素
    //筛选出当前点击的目标元素为a标签
    if (e.target.nodeName === 'A') {
        //  将ification1下面的子级遍历出来 得到V   删除V上面的active类名       
        [...$('.ification1').children].forEach(function(v) {
            // console.log(v);
            v.classList.remove('active')

        })

        //给当前目标元素添加激活样式   
        e.target.classList.add('active')
            //将当前元素的文本赋给span
        $('.ification3 span').textContent = e.target.textContent;

        $('.ification3 input').placeholder = e.target.dataset.keyword;


    }



})
let listDataArr = [
        //第一行
        { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
        { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
        { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
        { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
        { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },

        //第二行
        { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
        { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
        { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
        { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
        { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
        //第三行
        { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
        { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
        { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
        { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
        { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
        //第四行
        { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
        { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
        { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
        { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
        { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },

    ]
    //定义代码片段
let tupianHtml = '';
//遍历元素
// console.log(listDataArr);
listDataArr.forEach(function(v) {
        // console.log(v);
        tupianHtml += `
    <li class="graph8 df jc ">
    <div class="graph6">
        <a class="graph3" href="../apidetails/aipdetails.html">
            <img src="../../assets/imgs//${v.img}" alt="">
            <P class="graph4">${v.name}</P>
            <p class="${v.price==='免费' ? 'greend' : 'red'}">${v.price}</p>
        </a>
    </div>
    <div class="graph7"">申请数据</div>
    <span class="${v.isSpecial ? 'blk' : 'blk1'}">企业专用</span>

</li>
    `

    })
    //渲染   固定格式innerHTML
$('.graph2').innerHTML = tupianHtml

//蒙层
$('.login6').addEventListener('click', function() {
    $('.span2').classList.remove('blk1')
    $('.span2').classList.add('blk')
    $('.span3').classList.remove('blk')
    $('.span3').classList.add('blk1')

    $('.code').classList.add('blk1')
    $('.login7').classList.remove('blk1')



})
$('.login11').addEventListener('click', function() {
        // console.log(1);
        $('.span3').classList.remove('blk1')
        $('.span3').classList.add('blk')
        $('.span2').classList.remove('blk')
        $('.span2').classList.add('blk1')

        $('.code').classList.remove('blk1')
        $('.login7').classList.add('blk1')
    })
    //输入框长度大于0的时候 显示X 否则隐藏
$('.login8 .inpu').addEventListener('input', function() {

    if (this.value.length > 0) {
        $('.span4').classList.add('blk')
        $('.span4').classList.remove('blk1')
    } else {
        $('.span4').classList.add('blk1')
    };
})
$('.login9 .inpu').addEventListener('input', function() {

        if (this.value.length > 0) {
            $('.span10').classList.add('blk')
            $('.span10').classList.remove('blk1')
        } else {
            $('.span10').classList.add('blk1')
        };
    })
    //点击X把输入框长度清楚
$('.login8 .span4').addEventListener('click', function() {
    $('.login8 .inpu').value = '';
    this.classList.add('blk1')
        // $('.phone').classList.add('blk1')

})
$('.login9 .span10').addEventListener('click', function() {
        $('.login9 .inpu').value = '';
        this.classList.add('blk1')

    })
    //点击蒙层隐藏自己
$('.mengceng').addEventListener('click', function() {
        this.classList.add('blk1')
    })
    //阻止冒泡
$('.login2').addEventListener('click', function(e) {
        e.stopPropagation();
    })
    //点击显示蒙层
$a('.graph7').forEach(function(v) {
        v.addEventListener('click', function() {
            $('.mengceng').classList.remove('blk1')
        })
    })
    /**
     * 11.点击提交按钮,触发验证手机号和密码, 验证通过:跳转到首页, 否则:阻止跳转,并给相应的提示信息
     */
$('#form').addEventListener('submit', function(e) {

    //只判断手机号和密码不合法的情况
    if (!reg1.test($('.login8 .inpu').value)) {
        $('.phone').textContent = '请填写正确的手机号';
        //阻止浏览器的默认行为
        e.preventDefault();

    } else if (!reg2.test($('.login9 .inpu').value)) {

        $('.password').textContent = '请填写6位数字';
        //阻止浏览器的默认行为
        e.preventDefault();
    }
})









//定义手机号验证规则
let reg1 = /^1[3|4|5|6|7|8|9][0-9]{9}$/;

$('.login8 input').addEventListener('blur', function() {
    //验证: 验证结果是bool值
    let bool = reg1.test(this.value)

    //根据结果判断
    if (bool) {
        //验证通过
        $('.phone').textContent = ''
    } else {
        //验证失败
        $('.phone').textContent = '请填写正确的手机号'
    }

})

//密码
let reg2 = /^[0-9]{6}$/;

$('.login9 input').addEventListener('blur', function() {

    //验证: 验证结果是bool值
    let bool = reg2.test(this.value)

    //根据结果判断
    if (bool) {
        //验证通过
        $('.password').textContent = ''
    } else {
        //验证失败
        $('.password').textContent = '请填写6位数字'
    }

})